<template>
    <span>
        <Button type="primary" size="small" @click="handleBatchTaskAddShow">批量添加测试任务</Button>
        <Modal v-model="batch_task_add_modal" title="批量添加测试任务" :mask-closable="false">
            <Form :model="task_current" :label-width="80">
                <FormItem label="设备ID">
                    <template v-for="row in selected_clients" :key="row.client_id">
                        <ClientTag :client_id="row.client_id" />
                    </template>
                </FormItem>
                <FormItem label="任务名称">
                    <Input v-model="task_current.task_name"></Input>
                </FormItem>
                <FormItem label="任务类型">
                    <Select v-model="task_current.task_type">
                        <Option v-for="item in task_types" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="设备端口">
                    <Input v-model="task_current.client_port"></Input>
                    <p style="color:#aaa;">需要提前设置设备IP地址，否则添加时将忽略没有设置IP的设备</p>
                </FormItem>
                <FormItem label="是否启用">
                    <Switch v-model="task_current.task_enable"></Switch>
                </FormItem>
            </Form>
            <template #footer>
                <Button type="primary" @click="handleBatchTaskAddOk">确定</Button>
                <Button type="text" @click="handleBatchTaskAddCancel">取消</Button>
            </template>
        </Modal>
    </span>
</template>

<script>
import ClientTag from './ClientTag.vue';

export default {
    name: "TaskBatchAddButton",
    components: {
        ClientTag
    },
    props: {
        clients: Array
    },
    data() {
        return {
            batch_task_add_modal: false,
            task_current: {
                task_name: '',
                task_type: 'PING',
                task_enable: false,
                client_port: '80'
            },
            task_types: [
                {value: 'PING', label: 'PING'},
                {value: 'TCP', label: 'TCP'}
            ],
            selected_clients: []
        }
    },
    methods: {
        handleBatchTaskAddShow() {
            this.selected_clients = this.clients;
            if (this.selected_clients.length == 0) {
                this.errorMessage('请选择客户端');
                return;
            }
            this.task_current.task_name = '';
            this.task_current.task_type = 'PING';
            this.task_current.task_enable = false;
            this.task_current.client_port = '80';
            this.batch_task_add_modal = true;
        },
        handleBatchTaskAddOk() {
            let task_name = this.task_current.task_name.trim();
            if(task_name == '') {
                this.errorMessage('任务名称不能为空');
                return;
            }
            let task_type = this.task_current.task_type;
            let task_enable = this.task_current.task_enable ? 1 : 0;
            let client_port = this.task_current.client_port;
            if (task_type == 'TCP') {
                if (client_port == '') {
                    this.errorMessage('端口不能为空');
                    return;
                }else if (isNaN(client_port)) {
                    this.errorMessage('端口必须为数字');
                    return;
                }
            }else {
                client_port = 80;
            }
            let client_ids = [];
            for (let i = 0; i < this.selected_clients.length; i++) {
                client_ids.push(this.selected_clients[i].client_id);
            }
            this.$http.post('/add_batch_task', { client_ids: client_ids, task_name: task_name, task_type: task_type, task_enable: task_enable, client_port: client_port }).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success(`成功添加${res.data}条任务`);
                    this.batch_task_add_modal = false;
                }else {
                    this.errorMessage(res.data);
                }
            }).catch(err => {
                this.errorMessage(err.data.data);
            });
        },
        handleBatchTaskAddCancel() {
            this.batch_task_add_modal = false;
        },
    }
}
</script>